<template>
  <view class="register-container">
    <!-- 手机号/邮箱输入 -->
    <input type="text" placeholder="请输入手机号/邮箱" v-model="account" class="input-field" />
    <!-- 密码输入 -->
    <input type="password" placeholder="请输入密码" v-model="password" class="input-field" />
    <!-- 确认密码输入 -->
    <input type="password" placeholder="请确认密码" v-model="confirmPassword" class="input-field" />
    <!-- 注册按钮 -->
    <button type="primary" @click="handleRegister" class="register-btn">注册</button>
    <!-- 第三方登录入口 -->
    <view class="third-party-login">
      <text class="divider">或使用第三方账号注册</text>
      <view class="third-party-icons">
        <image src="/static/icons/wechat.png" mode="scaleToFill" class="icon" @click="wechatRegister"/>
        <image src="/static/icons/qq.png" mode="scaleToFill" class="icon" @click="qqRegister"/>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      account: '',
      password: '',
      confirmPassword: ''
    }
  },
  methods: {
    handleRegister() {
      // 后续实现注册逻辑验证和接口调用
      if (this.password !== this.confirmPassword) {
        uni.showToast({ title: '两次密码输入不一致', icon: 'none' });
        return;
      }
      console.log('注册信息:', { account: this.account, password: this.password });
    },
    wechatRegister() {
      // 后续实现微信注册逻辑
      console.log('微信注册');
    },
    qqRegister() {
      // 后续实现QQ注册逻辑
      console.log('QQ注册');
    }
  }
}
</script>

<style scoped>
.register-container {
  padding: 50rpx;
  background-color: $uni-bg-color;
}
.input-field {
  height: 80rpx;
  font-size: 28rpx;
  margin-bottom: 30rpx;
  border-bottom: 1rpx solid $uni-border-color;
  padding: 0 20rpx;
}
.register-btn {
  height: 80rpx;
  font-size: 32rpx;
  margin: 30rpx 0;
}
.third-party-login {
  text-align: center;
}
.divider {
  color: $uni-text-color-grey;
  font-size: 28rpx;
  margin: 20rpx 0;
}
.third-party-icons {
  display: flex;
  justify-content: center;
  gap: 50rpx;
  margin-top: 30rpx;
}
.icon {
  width: 80rpx;
  height: 80rpx;
}
</style>